<style>
  ul.cart-recommendations {
    display: flex;
    width: 100%;
  }
  .cart-recommendations .product-grid .grid__item{
    width: 25%;
    padding: 0;
  }
  .cart-recommendations .product-recommendations .grid {
      margin-left: 0;
  }
  .recommendations-container li{
    width: 25%;
    max-width: 25%;
  }
  .card--product{
    position: relative;
  }
  .add_to_cart .product-form__submit{
    font-size: 16px;
    height: 48px;
  }
  .product-cart_recommendations .grid__item{
    max-width: 25%;
  }
  .recommendations-container li:nth-child(n+5){
    display:none;
  }
  
  /** drawer-cart-recommendation **/
  .drawer-cart-recommendation__heading {
    color: var(--Dark, #15182A);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 45px; /* 200% */
    border-bottom: 1px solid var(--grey-20, #E6E6E6);
    margin-bottom: 20px;
    letter-spacing: 0;
  }
  .drawer-cart-recommendation .grid {
    flex-direction: column;
    row-gap: 2rem;
  }
  .drawer-cart-recommendation .grid__item {
    width: 100%;
    max-width: 100%;
  }
  .drawer-cart-recommendation .recommendation-item {
    display: flex;
    column-gap: 2.5rem;
  }
  .drawer-cart-recommendation .recommendation-item__media {
    width: 10rem;
  }
  .recommendation-item__media-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid var(--grey-20, #E6E6E6); 
    background-color: #f4f8fc;
  }
  .recommendation-item__content {
    flex: 1;
  }
  .recommendation-item__content-title {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 157.143% */
    display: flex;
    justify-content: space-between;
  }
  .recommendation-item__content-title .price {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 120% */
  }
  .recommendation-item__content-operate {
    color: #2F80ED;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 157.143% */
    letter-spacing: -0.7px;
    margin-top: 2rem;
  }
  .recommendation-loading.loading-overlay {
    left: unset;
  }
  
  /** drawer-cart-recommendation **/
  .drawer-recommandation {
    position: relative;
  }
  
  .recommendation_empty_list {
    padding: 20px 0;
  }
  .product-recommendations__empty-heading {
    padding: 0 3rem;
  }
  .product-cart_recommendations__empty {
    padding: 0 3rem;
    flex: 1;
    overflow: auto;
  }
  .product-recommendations__empty-heading {
    color: var(--Dark, #15182A);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 200% */
    margin: 50px 0 0 0;
    border-bottom: 1px solid var(--grey-20, #E6E6E6);
    padding-bottom: 12px;
  }
  
  .recommendation_product_link {
    text-decoration: none;
    color: #2F80ED;
  }
  
  .product_title_link {
    text-decoration: none;
    color: #000; 
  }
  
  .product_title_link:hover {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 0.2rem
  }

  @media screen and (max-width: 750px){
    .recommendations-container li{
      width: 50%;
      max-width: 50%;
    }
    .cart .collection .product-grid li {
        padding-left: 14px;
    }
    .cart .collection .product-grid {
        margin-left: -14px;
    }
    .product-cart_recommendations .grid__item {
        max-width: 50%;
    }
  }
</style>
{% if cart != empty %}
  <drawer-recommendations id="drawer-recommendations-container" class="recommendations-container drawer-cart-recommendation">
    <div class="drawer-cart-recommendation__heading">{{ settings.recommandation_heading }}</div>
    <ul class="grid"></ul>
    <div class="recommendation-loading loading-overlay hidden">
      <div class="loading-overlay__spinner">
        <svg width="18px" aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
        </svg>
      </div>
    </div>
  </drawer-recommendations>
  <script>
    let cartItemArr = [];
  </script>
  {% for item in cart.items %}
    <script>
        cartItemArr.push({
          product_id: `{{ item.product_id }}`
        });
      </script>
  {% endfor %}
  <script>
  $(function(){
    async function queryRecommendations (url) {
      const res = await fetch(url);
      return res.text();
    }
    const urlPrefix = `{{ routes.product_recommendations_url }}?section_id=recommendation-item&limit=4&intent=complementary&product_id=`
    const stack = {};
    async function invoke () {
      const recommendationsTitle = document.querySelector('.drawer-cart-recommendation__heading');
      recommendationsTitle.classList.add('hidden');
      
      for (let i = 0; i < cartItemArr.length; i++ ) {
        const item = cartItemArr[i];
        const text = await queryRecommendations(`${urlPrefix}${item.product_id}`);
        const html = document.createElement('div');
        html.innerHTML = text;
        const recommendations = html.querySelectorAll('.cart-recommendations li.grid__item');
        if (typeof recommendations !== 'undefined' && recommendations !== null) {
          for (let k = 0; k < recommendations.length; k++) {
            const id = recommendations[k].id;
            if (!stack[id]) {
              stack[id] = recommendations[k];
            }
          }
        }
      }
      render();
    }
    
    function render () {
      const nodeContainer = document.querySelector('#drawer-recommendations-container ul');
      Object.keys(stack).forEach((key) => {
        nodeContainer.appendChild(stack[key]);
      })

      if (!nodeContainer.hasChildNodes()) {
        const recommendationsTitle = document.querySelector('.drawer-cart-recommendation__heading');
        recommendationsTitle.classList.add('hidden');
      } else {
        const recommendationsTitle = document.querySelector('.drawer-cart-recommendation__heading');
        recommendationsTitle.classList.remove('hidden');
      }
    }
    invoke();
  });
  </script>
{% else %}
  <h2 class="product-recommendations__empty-heading">{{ settings.recommandation_empty_heading }}</h2>
  <div class="product-cart_recommendations__empty drawer-cart-recommendation">
    <ul class="recommendation_empty_list grid">
      {% for product in settings.recommendation_collection.products %}
        <li class="grid__item" id="{{ product.id }}">
          <div class="recommendation-item">
            {%- liquid
              assign featured_media_aspect_ratio = product.featured_media.aspect_ratio
              if product.featured_media.aspect_ratio == nil
                assign featured_media_aspect_ratio = 1
              endif
            -%}
            <div class="recommendation-item__media">
              <div class=" media media--transparent media--hover-effect"
                style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"
              >
              {% liquid
                assign redirect_url = product.url
                if product.metafields.custom.page_url != blank
                  assign redirect_url =  product.metafields.custom.page_url
                endif
              %}
                <a href="{{ redirect_url }}" class="media__link">
                  <img
                    srcset="{%- if product.featured_media.width >= 148 -%}{{ product.featured_media | img_url: '148x' }} 148w,{%- endif -%}
                    {%- if product.featured_media.width >= 167 -%}{{ product.featured_media | img_url: '167x' }} 167w,{%- endif -%}
                    {%- if product.featured_media.width >= 360 -%}{{ product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
                    {%- if product.featured_media.width >= 375 -%}{{ product.featured_media | img_url: '375x' }} 375w,{%- endif -%}
                      {%- if product.featured_media.width >= 533 -%}{{ product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
                      {%- if product.featured_media.width >= 720 -%}{{ product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
                      {%- if product.featured_media.width >= 940 -%}{{ product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
                      {%- if product.featured_media.width >= 1066 -%}{{ product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
                      {{ product.featured_media | img_url: 'master' }} {{ product.featured_media.width }}w"
                    src="{{ product.featured_media | img_url: '533x' }}"
                    sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                    alt="{{ product.featured_media.alt | escape }}"
                    loading="lazy"
                    class="recommendation-item__media-image"
                    width="{{ product.featured_media.width }}"
                    height="{{ product.featured_media.height }}"
                  >
                </a>
              </div>
            </div>
            <div class="recommendation-item__content">
              <div class="recommendation-item__content-title">
                <a href="{{ redirect_url }}" class="product_title_link">
                  {{ product.title | escape }}
                </a>
                <span class="price">
                  {{ product.price | money }}
                </span>
              </div>
              <div class="recommendation-item__content-operate">
                <a href="{{ redirect_url }}" class="recommendation_product_link">
                  {{ settings.recommendation_button_label }}
                  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
                    <path d="M3 2L6.5 5.5M3 9L5.33333 6.9" stroke="#2F80ED" stroke-width="0.933333" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </li>
      {% endfor %}
    </ul>  
  </div>
{% endif %}
